<template>
  <div id="app">
    <div class="page-wrapper">
      <!-- Main Header-->
              <main-header :headerClass="headerClass"></main-header>

      <!--End Main Header -->
    </div>

    <router-view/>
  </div>
</template>
<script>
import MainHeader from "@/components/MainHeader";

export default {
  components: {
    MainHeader
  },
  data() {
    return {
      headerClass: "",

    };
  },
  mounted() {
    this.handleScroll();
  },
  methods: {
    handleScroll() {
      let htmlDom = document.documentElement;
      window.onscroll = () => {
        if (htmlDom.scrollTop > 0) {
          this.headerClass = "fixed-header animated slideInDown";
        } else {
          this.headerClass = "";
        }
      };
    },
  },
};
</script>

<style lang="scss">
</style>
